<!-- 饼状图 -->
<template>
  <div>
    <div :id="id" style="height: calc(100vh - 65vh);padding-left:1rem;clear: both;"></div>
  </div>
</template>
<script>
export default {
  props: ['id', 'dataPie', 'pieTitle'],
  data () {
    return {
      myChart: '',
    }
  },
  methods: {
    fetchLine () {
      let self = this
      this.myChart = this.echarts.init(document.getElementById(this.id), 'light');
      let option = {
        // title: {
        //   text: '销售额',
        //   subtext: self.common.formatAmount('1222345',0),
        //   x: 'center',
        //   // textStyle: {
        //   //   fontSize: '15',
        //   //   color:'#999'
        //   // },
        //   subtextStyle:{
        //     fontSize:'16',
        //     lineHeight:'26',
        //     color:'#999'
        //   }
        // },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c}"
        },
        legend: {
          icon: "circle",
          orient: 'vertical',
          x: 'left',
          y: 'center',
          formatter: function (name) {
            var data = option.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            var p = (tarValue / total * 100).toFixed(2);
            return name + ' ' + '       ' + tarValue;
          },
          textStyle: {
            fontSize: '15',
            lineHeight: '24'
          },
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '金额',
            type: 'pie',
            center: ['65%', '48%'],
            // radius: ['56%', '68%'],
            avoidLabelOverlap: true,
            label: {
              align: 'right',
              // normal: {
              //   show: true,
              //   // position: 'inside'
              // },
            },
            // labelLine: {
            //   normal: {
            //       show: false
            //   }
            // },
            data: this.dataPie
          }
        ]
      };
      this.myChart.setOption(option);
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.fetchLine();
      // window.onresize = ()=>{
      //   this.myChart.resize();
      // }
    })
  }
}
</script>